<script>
	// 脚本代码



	// 1. Vue2风格(选项式）
	// export 用来对外输出本模块变量的接口
	// export default 和export 都可以导出
	// export default 在导入时就不需要写{}
	export default {
		data() {
			return {
				msg: "Hello wolrd1",
				count: 1
			}
		},
		methods: {
			add() {
				this.count++;
			}
		}
	}
</script>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';

	// const 不可变
	// let   局部变量
	// var   全局变量

	// vue3的风格(组合式)

	// 1. 数据
	// 死数据
	const msg2 = "Hello world2";
	let count2 = 1;
	const add2 = function() {
		count2++;
		console.log(count2);
	}
	// 响应式数据1
	let data3 = ref({
		count3: 1
	})
	// .value
	const add3 = function() {
		data3.value.count3++;
		console.log(data3.value.count3);
	}

	// 响应式数据2
	let data4 = reactive({
		count4: 1
	})
	// .value
	const add4 = function() {
		data4.count4++;
		console.log(data4.count4);
	}
</script>

<template>
	<!-- 视图 -->
	<!-- <h1>1. App.vue是根组件文件 测试 </h1>
	<div>{{msg}}</div>
	<div>{{count}}<button @click="add">加</button></div>

	<h1>测试vue3风格 死数据(改变不了)</h1>
	<div>{{count2}}<button @click="add2">加</button></div>

	<h1>测试vue3风格. 响应式数据(ref方式)</h1>
	<div>{{data3.count3}}<button @click="add3">加</button></div>

	<h1>测试vue3风格. 响应式数据(reactive方式)</h1>
	<div>{{data4.count4}}<button @click="add4">加</button></div>

	<h1>2. 引入ElementPlus</h1>
	<el-row class="mb-4">
		<el-button>Default</el-button>
		<el-button type="primary">Primary</el-button>
		<el-button type="success">Success</el-button>
		<el-button type="info">Info</el-button>
		<el-button type="warning">Warning</el-button>
		<el-button type="danger">Danger</el-button>
	</el-row>

	<h1>3. 显示路由页面</h1> -->
	<router-view></router-view>
</template>

<style scoped>
	/* css样式 */
</style>
